<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <input type="text" v-model="addname" placeholder="请输入姓名">
        <input type="text" v-model.number="addfen" placeholder="请输入分数">
        <button @click="add">添加</button><br>
        <select v-model="select">
            <option value="查看所有">查看所有</option>
            <option value="查看不及格">查看不及格</option>
            <option value="查看及格">查看及格的</option>
        </select><br>
        <h2>{{zongfen}}</h2><h2>{{pingjun | fen}}</h2>
        <!-- 按名字搜索 -->
        <input type="text" v-model="namess" placeholder="请输入姓名"><button @click="searchname(xian)">搜索</button><br>
        <button @click="arr.sort((a,b) => b.fen - a.fen)">按成绩正序排序</button>
        <button @click="arr.sort((a,b) => a.fen - b.fen)">按成绩倒序排序</button><br>
        <table border="1">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>分数</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in xian" :key="item.id">
                    <td>{{item.name}}</td>
                    <td>{{item.fen}}</td>
                    <td>
                        <button @click="edit(item)">修改分数</button>
                        <button @click="dele(item.id)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="xiu">
            <input type="text" placeholder="请输入分数" v-model.number="xiu">
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                addname:'',
                addfen:0,
                xiu:0,
                select:'查看所有',
                namess:'',
                arr:[{
                    id:1,
                    name:'张三',
                    fen:80
                },{
                    id:2,
                    name:'李四',
                    fen:90
                },{
                    id:3,
                    name:'王五',
                    fen:50
                }]
            },
            methods: {
               dele(id){
                   var index = this.arr.findIndex(item => item.id === id);
                   this.arr.splice(index,1);
               },
               add(){
                   if(this.addname && this.addfen){
                       this.arr.push({
                           id:this.arr.length+1,
                           name:this.addname,
                           fen:this.addfen
                       });
                       this.addname='';
                       this.addfen=0;
                   }
               },
               searchname(x){
                var arr = x.filter(item => item.name == this.namess);
                x = arr;
               }
            },
            computed: {
                xian(){
                    if(this.select == '查看所有'){
                        return this.arr;
                    }else if(this.select == '查看不及格'){
                        return this.arr.filter(item => item.fen < 60);
                    }else if(this.select == '查看及格'){
                        return this.arr.filter(item => item.fen >= 60);
                    }
                },
                //计算总分
                zongfen(){
                    var sum = 0;
                    this.arr.forEach(item => {
                        sum += item.fen;
                    })
                    return sum;
                },
                //计算平均分
                pingjun(){
                    var sum = 0;
                    this.arr.forEach(item => {
                        sum += item.fen;
                    })
                    return sum/this.arr.length;
                }
            },
            filters:{
                fen(value){
                    //去除小数点后一位
                    return '平均分' + value.toFixed(1);
                }
            }
        });
    </script>
</body>
</html>